import React from 'react'
import WebHeader from "../Header/WebHeader";
import {addLook, getBlogById} from '../../api/BlogApi'
import './BlogDetail.css'
import DetailHeader from "../DetailHeader/DetailHeader";
import {Card, Col, Layout} from "antd";
import CommentForm from "../Comment/CommentForm";
import 'tui-editor/dist/tui-editor-contents.css'; // editor content
import 'highlight.js/styles/default.css'; // code block highlight
import Viewer from 'tui-editor/dist/tui-editor-Viewer';
import {inject, observer} from "mobx-react";


@inject('blogStore')
@observer
export default class BlogDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            markdown: "",
            content: "",
            id: this.props.match.params.blogId,
            title: "",
            createTime: "",
            lookCount: 0,
            cardWidth: 5
        };
    }

    async componentDidMount() {
        await this.getBlogContent(this.props);
        new Viewer({
            el: document.querySelector('#viewerSection'),
            height: '500px',
            viewer: true,
            initialValue: this.state.markdown
        });
    }

    async getBlogContent(props) {
        this.state = {content: "", id: props.match.params.blogId, title: "", createTime: "", lookCount: 0, cardWidth: 5}
        //增加访问量
        addLook(this.state.id);
        // 获取文章内容
        const request = await getBlogById(this.state.id);
        const data = request.data;
        this.setState({
            markdown: data.contentMd,
            content: data.content,
            title: data.title,
            createTime: data.createTime,
            lookCount: data.vblogLookCount
        });
    }

    //componentWillReceiveProps

    componentWillReceiveProps(nextProps, nextContext) {
        this.getBlogContent(nextProps);
        console.log(nextProps.blogStore.cardWidth)
    }


    render() {
        return (
            <div className="BlogDetail">
                <WebHeader/>
                <div className="List">
                    <Layout>
                        <Col span={24}>
                            <Card className="Content">
                                <DetailHeader title={this.state.title} createTime={this.state.createTime}
                                              lookCount={this.state.lookCount}/>
                                <div id="viewerSection"/>
                                {/* <div dangerouslySetInnerHTML={{__html: this.state.content}}></div> */}
                                <CommentForm blogId={this.state.id}/>
                            </Card>
                        </Col>
                        {/*<Col span={this.state.cardWidth}>*/}
                        {/*<CardList/>*/}
                        {/*</Col>*/}
                    </Layout>

                </div>
            </div>
        );
    };


}
